<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选下拉列</title>
    <script>
        function move(fromId,toId){
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            // 将fromChild中选中的选项移动到toChild中
            // 此处在遍历时存在一个小问题
            // 由于需要移除对应的元素
            // 在当前数组中,移除了某个元素之后,数组长度会发生改变
            // 因此,假设需要移除的索引为0和1
            // 遍历时先移除0,当移除完0之后,原来的索引为1的元素变为索引为0的元素
            // 但是for循环0的下一个是1
            // 因此,会导致跳过了原有的索引为1的元素
            // for(let i = 0; i < fromChild.length; i++){
            // 为了防止出现这种情况,此处不能使用升序进行遍历
            // 而应该使用倒序进行遍历
            for(let i = fromChild.length-1; i >= 0; i--){
                let op = fromChild.options[i];
                if(op.selected){
                    // 当将对应的数组元素移除之后,数组长度会发生变化
                    // fromChild[i] = null;
                    // 如果将某个下拉列的元素赋值给了另一个下拉列
                    // 该元素会从当前下拉列中自动移除
                    toChild[toChild.length] = op;
                }
            }

        }
        function moveAll(fromId,toId){
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            for(let i = fromChild.length-1; i >= 0; i--){
                let op = fromChild.options[i];
                toChild[toChild.length] = op;
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            <select id="s1" multiple="multiple" style="width: 100px;height: 150px;">
                <option>admin</option>
                <option>alice</option>
                <option>jack</option>
                <option>tom</option>
            </select>
        </td>
        <td>
            <input type="button" value="&nbsp;-->" onclick="move('s1','s2')"/><br/>
            <input type="button" value="->>" onclick="moveAll('s1','s2')"/><br/>
            <input type="button" value="<--&nbsp;" onclick="move('s2','s1')"/><br/>
            <input type="button" value="<<-" onclick="moveAll('s2','s1')"/><br/>
        </td>
        <td>
            <select id="s2" multiple="multiple" style="width: 100px;height: 150px;">
            </select>
        </td>
    </tr>
</table>
</body>
</html>